
$anime-time: 8s;

$box-size: 400px;
$clip-distance: .05;
$clip-size: $box-size * (1 + $clip-distance * 2);
$path-width: 2px;

//$main-color: #69ca62;
$main-color: #fff;


%full-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.bb {
  //@extend %full-fill;
  //width: $box-size;
  //height: $box-size;
  color: $main-color;
  box-shadow: inset 0 0 0 1px rgba($main-color, .5);

  &::before,
  &::after {
    @extend %full-fill;
    content: '';
    z-index: -1;
    margin: -6px;
    box-shadow: inset 0 0 0 $path-width;
    //animation: clipMe $anime-time linear infinite;
    clip: rect(0px, 10px, 10px, 0px);
  }

  &::before {
    clip: rect(0px, 10px, 10px, 0px);
    animation-delay: $anime-time * -.5;
  }

  // for debug
  &:hover {
    &::after,
    &::before {
      background-color: rgba(#f00, .3);
    }
  }

}

@keyframes clipMe {
  0%, 100% {clip: rect(0px, $clip-size, $path-width, 0px); }
  25% {clip: rect(0px, $path-width, $clip-size, 0px); }
  50% {clip: rect($clip-size - $path-width, $clip-size, $clip-size, 0px); }
  75% {clip: rect(0px, $clip-size, $clip-size, $clip-size - $path-width); }
}
